import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import * as $ from 'jquery';

@Component({
     selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
    url = 'http://edu.xk.com/xkapi';
    userId = null;
    code = '';
    tasks = [];
    tasksSelected= [];

    message = '';
    activeId = 0;
    codeError = false;
    selectError = false;
    selectSuccess = false;
    pageOneShow = true;
    pageTwoShow = false;

    onSubmit(code):void {
        let that = this;
        //that.code = code;
        console.log('code :'+ code);
        this.http.get(`${that.url}/api/validTaskByCode?code=${code}`).subscribe(
          result => {
              if(result) {
                  if (result['status'] == 200 ) {
                      let data = result['data'];
                      let teacherInfo = data['teacher'];
                      that.tasks = data['tasks'];
                      if (!!teacherInfo) {
                          if (that.tasks.length < 1) {
                              that.message = 'woops,目前暂无符合您的可选课程。';
                              that.codeError = true;
                          } else {
                              sessionStorage.setItem('username', teacherInfo.name);
                              $("#first-page").addClass('animated fadeOutLeft');
                              that.pageOneShow = false;
                              
                              setTimeout(function() {
                                  that.pageTwoShow = true;
                                  $("#second-page").addClass('animated fadeInRight');
                              }, 500);
                          }
                      } else {
                          that.message = '输入错误，请重新输入';
                          that.codeError = true;
                      }
                  } else {
                      that.message = result['desc'] ? result['desc'] :'请求失败，请稍后再试';
                      that.codeError = true;
                  }
              } else {
                  that.message = result['desc'] ? result['desc'] :'请求失败，请稍后再试';
                  that.codeError = true;
              }
          }
      );
    }
    selectLesson(taskId):void {
        this.selectError = false;

        this.activeId = taskId;
        this.submitLesson();
    }
    submitLesson() :void {
        let that = this;
        let taskId =  that.activeId;
        this.http.get(`${this.url}/api/selectTask?code=${this.code}&taskId=${taskId}`).subscribe(
          result => {
              if(result) {
                  if (result['status'] == 200) {
                      console.log('success taskId :'+ taskId);
                      that.message = '恭喜您提交成功！';
                      that.selectSuccess = true;
                      setTimeout (function () {
                          that.selectSuccess = false;
                          that.page2One();
                      }, 3000);
                  } else {
                      that.message = result['desc'] ? result['desc'] : '提交失败，请稍后再试';
                      that.selectError = true;
                  }
              }
          }
      ); 
    }
    reCheck(): void {
        this.codeError = false;
    }
    logout(): void {
        this.userId = '';
        sessionStorage.removeItem('username');
    }
    back (name) {
        if (name === 'one') {
          this.page2One();
        }

    }
    page2One () {
        this.pageOneShow = true;
        this.pageTwoShow = false;
        setTimeout(function() {
           $("#first-page").css({'display': 'block'}).addClass('animated fadeInRight');
        }, 100);
    }
    page2Two () {
        $("#first-page").addClass('animated fadeOutLeft').css({'display': 'none'});
        $("#third-page").addClass('animated fadeOutLeft').css({'display': 'none'});
        setTimeout(function() {
           $("#second-page").css({'display': 'block'}).addClass('animated fadeInRight');
        }, 500);
    }
    page2Three () {
        $("#first-page").addClass('animated fadeOutLeft').css({'display': 'none'});
        $("#second-page").addClass('animated fadeOutLeft').css({'display': 'none'});
        setTimeout(function() {
           $("#third-page").css({'display': 'block'}).addClass('animated fadeInRight');
        }, 500);
    }
    getUser(): any {
        this.userId =sessionStorage.getItem('username');
        return sessionStorage.getItem('username');
    }

    dateFtt(fmt,date): string { //author: meizz
        var o = {   
          "M+" : date.getMonth()+1,                 //月份
          "d+" : date.getDate(),                    //日
          "h+" : date.getHours(),                   //小时
          "m+" : date.getMinutes(),                 //分
          "s+" : date.getSeconds(),                 //秒
          "q+" : Math.floor((date.getMonth()+3)/3), //季度
          "S"  : date.getMilliseconds()             //毫秒
        };   
        if(/(y+)/.test(fmt))   
          fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));   
        for(var k in o)   
          if(new RegExp("("+ k +")").test(fmt))   
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
        return fmt;   
    }
    constructor(private http: HttpClient) {
        this.message = '';
      }
    ngOnInit () {
        $("#btnTest").on('click',function(){
            alert('hi,jquery!');
        });
        $('#jq22').addClass('animated slideInRight');
        $('#jq23').addClass('animated slideInRight');
        $('#jq24').addClass('animated slideInRight');
        $('#jq25').addClass('animated slideInRight');

    }

}
